<template>
  <div class="transition-index-wrapper" v-loading="isLoading">
    <component :is="comp" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as CONSTANTS from '@/constants/index'
import * as UTILS from '@/utils/index'

export default {
  props: {},
  components: {},
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      isLoading: true,
      comp: null,
    }
  },
  computed: {
    ...mapGetters(['common', 'user', 'quiz']),
    isDev() {
      return process.env.NODE_ENV === CONSTANTS.VAR_NODE_ENV_DEV
    },
    historyList() {
      if (!this.quiz) return null
      return this.quiz.historyList
    },
    list() {
      if (!this.historyList) return null
      return this.historyList.list
    },
    currentBabyId() {
      if (!this.user) return null
      return this.user.currentBabyId
    },
    isReady() {
      return (
        !!this.common &&
        !!this.common.token &&
        !!this.user.currentBabyData &&
        !!this.currentBabyId
      )
    },
  },
  async mounted() {},
  filters: {},
  watch: {
    isReady: {
      immediate: true,
      async handler(v, prevBabyId) {
        if (v) this.onInit()
      },
    },
  },
  methods: {
    async onInit() {
      await this.onGetHistoryList()
      this.isLoading = false

      let comp = () => import('@/views/Quiz/Index.vue')
      if (this.historyList.total * 1)
        comp = () => import('@/views/Quiz/Report.vue')
      if (window.location.href.indexOf('isShare') > -1)
        comp = () => import('@/views/Transition/Share.vue')

      this.comp = comp
    },
    async onGetHistoryList() {
      const babyId = this.user.currentBabyId
      await this.$store.dispatch(CONSTANTS.DISPATCH_GETASYNC_HISTORYLIST, {
        babyId,
      })
      this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
    },
    async showLackBabyModal() {
      const dialog = await this.$createDialog(
        () => import('./modules/LackBabyModal.vue'),
        {
          destroyOnClose: true,
          on: {
            close: (v) => {
              dialog.close()
              if (UTILS.isIOSDevice())
                return window.webkit.messageHandlers.addBabys.postMessage(null)
              else return window.android.playCourse('addBabys', '')
            },
          },
        }
      )
    },
  },
}
</script>

<style lang="less" scoped>
.transition-index-wrapper {
  min-height: 100%;
}
</style>
